<template>
  <div class="page-wrapper flex-vertical">
    <div class="app-container fill">
      <VForm :formData="formData" :inline="true" >
        <template #footer>
          <el-button type="primary" @click="add">新增</el-button>
        </template>
      </VForm>
      <table-list ref="tableRef" :columns="logsColumnData" :dataSource="dataSource">
        <template #操作="{row}">
          <el-popconfirm title="请确认是否删除?" @confirm="confirm(row)">
            <template #reference>
              <el-button type="danger" link>删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </table-list>
      <!-- 新增 -->
      <el-dialog
        v-model="dialogVisible"
        title="新增"
        width="500"
        :before-close="handleClose"
      >
        <VForm :formData="addFormData" label-width="50px" @submit="submit"></VForm>
        
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'Tag' })
import TableList from "@/components/table-list/index.vue";
import {categorysList,addCategorys,delCategorys} from "@/api";

const logsColumnData = ref([
  { label: "名称", prop: "name" },
  { label: "创建时间", prop: "created_at" },
  { label: "操作",slot:"操作",width:80},
]);

const dataSource = ref([])
onMounted(()=>{
  init()
});


const init = () => {
  categorysList().then(res=>{
    dataSource.value = res.data;
  })
};

const formData = ref([
  {
    tag:'el-input',
    label:'名称',
    prop:'title',
    rules:[
       {  message: '请选择', trigger: 'blur' },
    ]
  }
]);

const add = ()=>{
  dialogVisible.value = true;
}

const dialogVisible = ref(false);

const addFormData = ref([
  {
    tag:'el-input',
    label:'名称',
    prop:'name',
    rules:[
       {  required:true, message: '请选择', trigger: 'blur' },
    ]
  }
]);

const submit = (val)=>{
  console.log(val);
  addCategorys(val).then(res=>{
    dialogVisible.value = false;
    init();
  })
}

const confirm = (row)=>{
  delCategorys({id:row.id}).then(res=>{
    dialogVisible.value = false;
    init();
  })
}
</script>
